Intento hacer mi primera aplicación en reaccionar, todo funciona, pero trato de tomar la cantidad de factura y el número de personas y dividir la factura por persona, y agregar propina. Sé que para alguien probablemente sea una solución de 5 minutos, pero comencé a trabajar con eso ayer y todavía no puedo encontrar la solución.
Quiero tomar el monto de la factura y dividirlo por cantidad de persona + propina si alguien elige propina. Qué hice mal
import React, { useState } from 'react' import style from './BillSplitter.module.css' const tips = [5, 10, 15, 25] const Input = ({ label, id, handleChange, name, type, placeholder }) => ( <> <label className={`${style.label}`} htmlFor={id}>{label}</label> <input className={`${style.input}`} type={type || "number"} id={id} name={name || id} placeholder={placeholder} onChange={handleChange}></input> <br /> </> ); const SelectTip = ({ tip }) => { <> <button className='tipButton' value={tip}></button> </> } function BillSplitter() { const [tipAmount, setTipAmount] = useState(0) const [billAmount, setBillAmount] = useState(0) const [personAmount, setPersonAmount] = useState(0) function handleChange(e) { console.log(e.target.value) } return ( <div className={`${style.wrapper}`}> <div className={`${style.box}`}> <div className={`${style.top}`}> <h2 className={`${style.title}`}>Bill Splitter</h2> <p className={`${style.personBillAmount}`}>Person Bill Amount</p> <p onChange={handleChange} className={`${style.totalPersonAmount}`} >$ {tipAmount}</p> </div> <div className={`${style.bottom}`}> <Input handleChange={handleChange} className={`${style.clases}`} placeholder='Amount of bill' label="Bill value">{billAmount}</Input> <Input handleChange={handleChange} className={`${style.clases}`} placeholder='Number of people' label="Number of people">{personAmount}</Input> <div className={`${style.tipBox}`}> <p>Select tip</p> {tips.map((tip) => { return <button className={`${style.tipButton}`}>{tip} %</button> })} </div> </div> </div> </div> ) } export default BillSplitterSe agregó el controlador onChange al componente de Input y se pasan las diferentes funciones de establecimiento de entrada. Luego haga el cálculo cuando se seleccione la punta.
Prueba como a continuación:
const tips = [5, 10, 15, 25]; const Input = ({ label, id, handleChange, name, type, placeholder }) => ( <React.Fragment> <label htmlFor={id}>{label}</label> <input type={type || "number"} id={id} name={name || id} placeholder={placeholder} onChange={(e) => handleChange(e.target.value)} ></input> <br /> </React.Fragment> ); function BillSplitter() { const [billAmount, setBillAmount] = React.useState(0); const [personAmount, setPersonAmount] = React.useState(0); const [perCost, setPerCost] = React.useState(0); const calculatePerPeronAmount = (tip) => { if (personAmount > 0) { setPerCost(((1 + 0.01 * tip) * billAmount) / personAmount); } }; return ( <div> <div> <div> <h2>Bill Splitter</h2> <p>Person Bill Amount</p> <p>$ {perCost}</p> </div> <div> <Input handleChange={setBillAmount} placeholder="Amount of bill" label="Bill value" > {billAmount} </Input> <Input handleChange={setPersonAmount} placeholder="Number of people" label="Number of people" > {personAmount} </Input> <div> <p>Select tip</p> {tips.map((tip) => { return ( <button onClick={() => calculatePerPeronAmount(tip)} key={tip}> {tip} % </button> ); })} </div> </div> </div> </div> ); } ReactDOM.render(<BillSplitter />, document.querySelector('.react')); <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>